<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="用户姓名" prop="username">
            <el-input v-model="form.username"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证号" prop="idCard">
            <el-input v-model="form.idCard"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号" prop="phoneNumber">
            <el-input v-model="form.phoneNumber"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="内部推广员" prop="internal">
            <el-input v-model="form.internal"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="外部推广员" prop="external">
            <el-input v-model="form.external"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="经纪人邀请" prop="agentInviteState">
            <el-select v-model="form.agentInviteState" placeholder="请选择">
              <el-option
                v-for="item in whetherData"
                :key="item.itemValue"
                :label="item.itemText"
                :value="item.itemValue"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="账号状态" prop="state">
            <el-select v-model="form.state" placeholder="请选择">
              <el-option
                v-for="item in accountData"
                :key="item.itemValue"
                :label="item.itemText"
                :value="item.itemValue"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="登录密码" prop="password">
            <el-input v-model="form.password"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button @click="closeDialog">取消</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import {
  getUserFindOne,
  postSaveUser,
  putUpdateUser
} from "../../../src/assets/js/api";
export default {
  name: "Registered",
  props: ["dialogVisible", "accountData", "whetherData", "content", "getList"],
  data() {
    // 为空校验
    var validateNull = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("必填项不能为空"));
      } else {
        callback();
      }
    };
    // selecr为空
    var validateSelect = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("必选项不能为空"));
      } else {
        callback();
      }
    };
    // 身份证校验
    var validateidCard = (rule, value, callback) => {
      let reg = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/;
      if (!value) {
        return callback(new Error("必选项不能为空"));
      }
      if (!reg.test(value)) {
        return callback(new Error("请输入正确的身份证号"));
      } else {
        callback();
      }
    };
    // 手机号
    var validatePhoneNumber = (rule, value, callback) => {
      let reg = /^1[345789]\d{9}$/;
      if (!value) {
        return callback(new Error("必选项不能为空"));
      }
      if (!reg.test(value)) {
        return callback(new Error("请输入正确的手机号码"));
      } else {
        callback();
      }
    };
    // 邮箱号
    var validateEmail = (rule, value, callback) => {
      let reg = /^\w{1,64}@[a-z0-9-]{1,256}(\.[a-z]{2,6}){1,2}$/;
      if (!value) {
        return callback(new Error("必选项不能为空"));
      }
      if (!reg.test(value)) {
        return callback(new Error("请输入正确的邮箱号"));
      } else {
        callback();
      }
    };
    return {
      form: {
        agentInviteState: "0",
        state: "1"
      },
      rules: {
        username: [
          { validator: validateNull, trigger: "blur", required: true }
        ],
        idCard: [
          { validator: validateidCard, trigger: "blur", required: true }
        ],
        phoneNumber: [
          { validator: validatePhoneNumber, trigger: "blur", required: true }
        ],
        email: [{ validator: validateEmail, trigger: "blur", required: true }],
        internal: [
          { validator: validateNull, trigger: "blur", required: true }
        ],
        external: [
          { validator: validateNull, trigger: "blur", required: true }
        ],
        agentInviteState: [
          { validator: validateSelect, trigger: "change", required: true }
        ],
        state: [
          { validator: validateSelect, trigger: "change", required: true }
        ]
      }
    };
  },
  created() {
    if (this.content) {
      this.editContent();
    }
  },
  methods: {
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.form.id) {
            this.putUpdateUser();
          } else {
            this.postSaveUser();
          }
        } else {
          return false;
        }
      });
    },
    // 修改
    putUpdateUser() {
      putUpdateUser(this.form).then(res => {
        if (res.code === 200) {
          this.$message({
            message: res.message,
            type: "success"
          });
          this.$emit("getList");
          this.$emit("dialogVisible", false);
          this.$refs["form"].resetFields();
        } else {
          this.$message({
            message: res.message,
            type: "error"
          });
        }
      });
    },
    // 新增
    postSaveUser() {
      postSaveUser(this.form).then(res => {
        if (res.code === 200) {
          this.$message({
            message: res.message,
            type: "success"
          });
          this.$emit("getList");
          this.$emit("dialogVisible", false);
          this.$refs["form"].resetFields();
        } else {
          this.$message({
            message: res.message,
            type: "error"
          });
        }
      });
    },
    //点击取消按钮弹框消失
    closeDialog() {
      this.$emit("dialogVisible", false);
      this.$refs["form"].resetFields();
    },
    // 获取编辑回显信息
    editContent() {
      getUserFindOne(this.content).then(res => {
        this.form = res.data;
        this.form.agentInviteState = String(res.data.agentInviteState);
        this.form.state = String(res.data.state);
      });
    }
  }
};
</script>

<style scoped></style>
